<template>
	<view class="content">
		<scroll-view scroll-y class="left-aside">
			<view v-for="item in flist" :key="item.id" class="f-item b-b" :class="{active: item.id === currentId}"
				@click="tabtap(item)">
				{{item.title}}
			</view>
		</scroll-view>
		<view class="right-aside">
			<view class="fixed-class">
				<scroll-view scroll-x="false" class="nav" scroll-with-animation
					style="z-index:100;padding-left:8px;padding-right:118px">
					<view class="cu-item" :class="index == TabCur ? 'text-green cur' : ''"
						v-for="(item, index) in slist" :key="index" @tap="tabSelect" :data-id="index">
						<text :style="index == TabCur ? 
						'background:#fff;color: #303133;padding: 2px 10px 2px 10px;border-radius: 16px;margin-right: -10px'
											: 'background:transparent;color:#fff;margin-right: -10px'">{{ item.title }}</text>
					</view>
				</scroll-view>
			</view>

			<scroll-view scroll-with-animation scroll-y style="margin-top:48px;flex-shrink:0;height: 100%;">
				<view class="goods-list">
					<view v-for="(item, index) in productList" :key="index" class="goods-item"
						@click="navToDetailPage(item)">
						<view class="image-wrapper">
							<image :src="item.img + '?x-oss-process=style/400px'" mode="aspectFill"></image>
						</view>
						<view class="right-cont">
							<text class="title clamp2">{{item.title}}</text>
							<view class="price-box" v-if="item.status!==2">
								<text
									class="price">{{isVip? (item.vipPrice / 100.0 + ' [VIP]') : (item.price / 100.0)}}</text>
								<text>已售 {{item.sales?item.sales:0}} 件</text>
							</view>
							<view class="price-box" v-else>
								<text class="price">询价</text>
							</view>
						</view>
					</view>
					<view style="margin:10upx;text-align:center;width:100%;color:#909399;">
						{{ productList.length > 0 ? '-- 到底啦 --':'-- 暂无数据 --'}}
					</view>
				</view>
			</scroll-view>


		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				TabCur: 0,
				scrollLeft: 0,
				sizeCalcState: false,
				tabScrollTop: 0,
				currentId: 1,
				currentPId: 1,
				flist: [],
				slist: [],
				productList: [],
				rawData: []
			}
		},
		onLoad() {
			this.loadCategory();
		},
		methods: {
			//加载分类
			loadCategory() {
				const that = this
				this.$api.request('category', 'categoryTwoList').then(res => {
					that.rawData = res.data
					that.flist = res.data
					that.currentId = res.data[0].id
					that.slist = res.data[0].childrenList
					if (that.slist && that.slist.length > 0) {
						that.currentPId = that.slist[0].id
						that.loadData();
					}
				})
			},
			//加载分类下的商品
			loadData() {
				this.tabScrollTop = this.tabScrollTop === 0 ? 1 : 0
				let orderByInfo = {
					orderBy: 'sales',
					isAsc: false
				}
				uni.showLoading({
					title: '加载中'
				});
				this.$api.request('product', 'getProductPage', {
					categoryId: this.currentPId,
					pageNo: 1,
					pageSize: 10000,
					...orderByInfo
				}).then(res => {
					this.productList = res.data.items;
					uni.hideLoading()
				})
			},
			//一级分类点击
			tabtap(item) {
				const that = this;
				that.currentId = item.id
				that.tabScrollTop = that.tabScrollTop === 0 ? 1 : 0
				that.slist = item.childrenList
				that.productList = []
				if (that.slist && that.slist.length > 0) {
					that.currentPId = that.slist[0].id
					that.loadData();
				}
			},
			//二级分类点击
			tabSelect(e) {
				const that = this;
				that.TabCur = e.currentTarget.dataset.id;
				that.scrollLeft = (e.currentTarget.dataset.id - 1) * 60;
				that.currentPId = that.slist[that.TabCur].id
				that.loadData();
			},
			//详情
			navToDetailPage(item) {
				//测试数据没有写id，用title代替
				let id = item.id;
				uni.navigateTo({
					url: `/pages/product/detail?id=${id}`
				})
			},
		}
	}
</script>

<style lang='scss'>
	page,
	.content {
		height: 100%;
		background-color: #f8f8f8;
	}

	.list-scroll-content {
		height: 100%;
	}

	.content {
		display: flex;
	}

	.left-aside {
		flex-shrink: 0;
		width: 200upx;
		height: 100%;
		background-color: #fff;
	}

	.f-item {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100upx;
		font-size: 28upx;
		color: $font-color-base;
		position: relative;

		&.active {
			color: $base-color;
			background: #f8f8f8;

			&:before {
				content: '';
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				height: 36upx;
				width: 8upx;
				background-color: $base-color;
				border-radius: 0 4px 4px 0;
				opacity: .8;
			}
		}
	}

	.right-aside {
		flex: 1;
		overflow: hidden;
		padding-left: 20upx;
	}

	.s-item {
		display: flex;
		align-items: center;
		height: 70upx;
		padding-top: 8upx;
		font-size: 28upx;
		color: $font-color-dark;
	}

	.t-list {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		background: #fff;
		padding-top: 12upx;

		&:after {
			content: '';
			flex: 99;
			height: 0;
		}
	}

	.t-item {
		flex-shrink: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		width: 176upx;
		font-size: 26upx;
		color: #666;
		padding-bottom: 20upx;

		image {
			width: 140upx;
			height: 140upx;
		}
	}

	.fixed-class {
		position: fixed;
		background-color: rgb(7, 193, 96);
		width: 100%;
		z-index: 9999;
		-webkit-transform: translateY(0) translateX(0);
		transform: translateY(0) translateX(0);
		transition: all .4s ease 0s;
		-o-transition: all .4s ease 0s;
		-moz-transition: all .4s ease 0s;
		-webkit-transition: all .4s ease 0s;
	}

	.fixed-class.active {
		display: block;
	}

	.fixed-class .cu-item {
		transition: all 0.6s ease-in-out 0s;
		transform: translateX(0upx);
	}

	.fixed-class .cu-item.move-cur {
		transform: translateX(0upx);
	}

	.fixed-class .cu-item .move {
		position: absolute;
		right: 0;
		display: flex;
		width: 160upx;
		height: 100%;
		transform: translateX(100%);
	}

	.fixed-class .cu-item .move view {
		display: flex;
		flex: 1;
		justify-content: center;
		align-items: center;
	}

	.nav {
		white-space: nowrap;
	}

	.nav .cu-item {
		height: 90upx;
		display: inline-block;
		line-height: 90upx;
		font-size: 13px;
		margin: 0 10upx;
		padding: 0 20upx;
	}

	/* 商品列表 */
	.goods-list {
		display: flex;
		flex-wrap: wrap;
		padding: 30upx;
		background: #fff;

		.goods-item {
			display: flex;
			width: 100%;
			padding-bottom: 40upx;
		}

		.image-wrapper {
			width: 200upx;
			height: 150upx;
			border-radius: 3px;
			overflow: hidden;
			border: #f2f2f2 2upx solid;
			box-shadow: #f3f3f3 0upx 0upx 16upx;

			image {
				width: 100%;
				height: 100%;
				opacity: 1;
			}
		}

		.right-cont {
			overflow: hidden;
			float: right;
			padding-left: 20upx;
			width: 100%;

			.title {
				font-size: $font-base;
				color: $font-color-dark;
				line-height: 44upx;
				min-height: 88upx;
			}

			.price-box {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-right: 10upx;
				font-size: 24upx;
				color: $font-color-light;
			}

			.price {
				font-size: $font-lg;
				color: $uni-color-primary;
				line-height: 1;

				&:before {
					content: '￥';
					font-size: 26upx;
				}
			}
		}

	}
</style>
